﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Presentation/master.Master" AutoEventWireup="true"
    CodeBehind="StationeryReqTrendAnalysis.aspx.cs" Inherits="Staionery_Inventory.Presentation.Reports.StationeryReqTrendAnalysis" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="../../js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="../../js/globalize.js" type="text/javascript"></script>
    <script src="../../js/dx.chartjs.js" type="text/javascript"></script>
    <script src="../../js/knockout-3.0.0.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="panel">
<div class="row">
<asp:Label ID="lblCategoryBy" runat="server" Text="CategoryBy" CssClass="col-md-4 text-info"></asp:Label>
<div class="col-md-4">
<asp:RadioButton ID="rbQuantity" runat="server" Text="Quantity" 
                    GroupName="grpCategory" AutoPostBack="True" 
                    oncheckedchanged="rbQuantity_CheckedChanged" />
</div>
<div class="col-md-4">
<asp:RadioButton ID="rbInventory" runat="server" Text="Inventory" 
                    GroupName="grpCategory" AutoPostBack="True" 
                    oncheckedchanged="Inventory_CheckedChanged" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<asp:Label ID="lblCategory" runat="server" Text="Select Category:"></asp:Label>
</div>
<div class="col-md-8">
<asp:ListBox ID="Category" runat="server" SelectionMode="Multiple" 
                    DataSourceID="SqlDataSource3" DataTextField="Category" CssClass="form-control"
                    DataValueField="Category">
                </asp:ListBox>
                <asp:SqlDataSource ID="SqlDataSource3" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:InvManagementConnectionString %>" 
                    
        SelectCommand="SELECT DISTINCT [Category] FROM [StationeryItems]">
                </asp:SqlDataSource>
</div>
</div>
<div class="row">
<div class="col-md-4">
<asp:Label ID="lblDepartment" runat="server" Text="Department:"></asp:Label>
</div>
<div class="col-md-8">
<asp:DropDownList ID="Ddldept" runat="server" DataSourceID="SqlDataSource4" 
                    DataTextField="DeptName" DataValueField="DeptName" CssClass="form-control">
                </asp:DropDownList>
                <asp:SqlDataSource ID="SqlDataSource4" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:InvManagementConnectionString %>" 
                    SelectCommand="SELECT DISTINCT [DeptName] FROM [Department]">
                </asp:SqlDataSource>
</div>
</div>
<div class="row">
<div class="col-md-4">
<asp:Label ID="lbloptions" runat="server" Text="Options:"></asp:Label>
</div>
<div class="col-md-4">
<asp:RadioButton ID="rbLast3Months" runat="server" Text="Last 3 months" 
                    GroupName="optionsMonth" onload="Page_Load" AutoPostBack="True" 
                    oncheckedchanged="rbLast3Months_CheckedChanged" Enabled="False" />
</div>
<div class="col-md-4">
<asp:RadioButton ID="rbCustoms" runat="server" Text="Custom" 
                    GroupName="optionsMonth" oncheckedchanged="rbCustoms_CheckedChanged" 
                    AutoPostBack="True" Enabled="False" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<asp:Label ID="Lblmonth1" runat="server" Text="Month1 :" Enabled="False"></asp:Label>
</div>
<div class="col-md-3">
<asp:DropDownList ID="ddlMonth1" runat="server" style="margin-bottom: 7px" CssClass="form-control"
                    Enabled="False">
                    <asp:ListItem Value="1">January</asp:ListItem>
                    <asp:ListItem Value="2">Feb</asp:ListItem>
                    <asp:ListItem Value="3">March</asp:ListItem>
                    <asp:ListItem Value="4">April</asp:ListItem>
                    <asp:ListItem Value="5">May</asp:ListItem>
                    <asp:ListItem Value="6">June</asp:ListItem>
                    <asp:ListItem Value="7">July</asp:ListItem>
                    <asp:ListItem Value="8">August</asp:ListItem>
                    <asp:ListItem Value="9">September</asp:ListItem>
                    <asp:ListItem Value="10">October</asp:ListItem>
                    <asp:ListItem Value="11">November</asp:ListItem>
                    <asp:ListItem Value="12">December</asp:ListItem>
                </asp:DropDownList>
</div>
<div class="col-md-3">
<asp:Label ID="lblYear1" runat="server" Text="Year1 :" Enabled="False"></asp:Label>
</div>
<div class="col-md-3">
<asp:DropDownList ID="ddlYear1" runat="server" Enabled="False" CssClass="form-control">
                    <asp:ListItem Value="2014">2014</asp:ListItem>
                    <asp:ListItem Value="2013">2013</asp:ListItem>
                    <asp:ListItem Value="2012">2012</asp:ListItem>
                    <asp:ListItem Value="2014">2011</asp:ListItem>
                </asp:DropDownList>
</div>
</div>
<div class="row">
<div class="col-md-3">
<asp:Label ID="lblMonth2" runat="server" Text="Month2 :" Enabled="False"></asp:Label>
</div>
<div class="col-md-3">
<asp:DropDownList ID="ddlMonth2" runat="server" style="margin-bottom: 7px" CssClass="form-control"
                    Enabled="False">
                    <asp:ListItem Value="1">January</asp:ListItem>
                    <asp:ListItem Value="2">Feb</asp:ListItem>
                    <asp:ListItem Value="3">March</asp:ListItem>
                    <asp:ListItem Value="4">April</asp:ListItem>
                    <asp:ListItem Value="5">May</asp:ListItem>
                    <asp:ListItem Value="6">June</asp:ListItem>
                    <asp:ListItem Value="7">July</asp:ListItem>
                    <asp:ListItem Value="8">August</asp:ListItem>
                    <asp:ListItem Value="9">September</asp:ListItem>
                    <asp:ListItem Value="10">October</asp:ListItem>
                    <asp:ListItem Value="11">November</asp:ListItem>
                    <asp:ListItem Value="12">December</asp:ListItem>
                </asp:DropDownList>
</div>
<div class="col-md-3">
<asp:Label ID="lblYear2" runat="server" Text="Year2 :" Enabled="False"></asp:Label>
</div>
<div class="col-md-3">
<asp:DropDownList ID="ddlYear2" runat="server" Enabled="False" CssClass="form-control">
                    <asp:ListItem Value="2014">2014</asp:ListItem>
                    <asp:ListItem Value="2013">2013</asp:ListItem>
                    <asp:ListItem Value="2012">2012</asp:ListItem>
                    <asp:ListItem Value="2014">2011</asp:ListItem>
                </asp:DropDownList>
</div>
</div>
<div class="row">
<div class="col-md-3">
<asp:Label ID="lblMonth3" runat="server" Text="Month3 :" Enabled="False"></asp:Label>
</div>
<div class="col-md-3">
<asp:DropDownList ID="ddlMonth3" runat="server" Height="16px" CssClass="form-control"
                    style="margin-bottom: 7px" Enabled="False">
                    <asp:ListItem Value="1">January</asp:ListItem>
                    <asp:ListItem Value="2">Feb</asp:ListItem>
                    <asp:ListItem Value="3">March</asp:ListItem>
                    <asp:ListItem Value="4">April</asp:ListItem>
                    <asp:ListItem Value="5">May</asp:ListItem>
                    <asp:ListItem Value="6">June</asp:ListItem>
                    <asp:ListItem Value="7">July</asp:ListItem>
                    <asp:ListItem Value="8">August</asp:ListItem>
                    <asp:ListItem Value="9">September</asp:ListItem>
                    <asp:ListItem Value="10">October</asp:ListItem>
                    <asp:ListItem Value="11">November</asp:ListItem>
                    <asp:ListItem Value="12">December</asp:ListItem>
                </asp:DropDownList>
</div>
<div class="col-md-3">
<asp:Label ID="lblYear3" runat="server" Text="Year3 :" Enabled="False"></asp:Label>
</div>
<div class="col-md-3">
<asp:DropDownList ID="ddlYear3" runat="server" Enabled="False" CssClass="form-control">
                    <asp:ListItem Value="2014">2014</asp:ListItem>
                    <asp:ListItem Value="2013">2013</asp:ListItem>
                    <asp:ListItem Value="2012">2012</asp:ListItem>
                    <asp:ListItem Value="2014">2011</asp:ListItem>
                </asp:DropDownList>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-4">
<input type="button" id="btnGenerateChart" runat="server" value="Generate Report" class="btn btn-primary" />
</div>
<div class="col-md-3 col-md-offset-1">
<asp:Button ID="btnCancel" runat="server" CssClass="btn btn-default" Text="Cancel" />
</div>
</div>
<div class="row">
<div class="well">
<div id="chartContainer"></div>
</div>
</div>
</div>
    <script type="text/javascript">
        $(function () {
            $("#ContentPlaceHolder1_btnGenerateChart").click(function () {


                var $deptName = $("#<%=Ddldept.ClientID%>").val();
                var $month1 = $("#<%=ddlMonth1.ClientID%>").val();
                var $year1 = $("#<%=ddlYear1.ClientID%>").val();
                var $month2 = $("#<%=ddlMonth2.ClientID%>").val();
                var $year2 = $("#<%=ddlYear2.ClientID%>").val();
                var $month3 = $("#<%=ddlMonth3.ClientID%>").val();
                var $year3 = $("#<%=ddlYear3.ClientID%>").val();

                if ($("#<%=rbQuantity.ClientID%>").prop("checked"))
                    var $optionsCategory = "category";
                else var $optionsCategory = "inventory";

                var $selectedItems = $("#<%=Category.ClientID%>").val();

                alert($deptName + $month1);


                $.ajax({
                    type: "POST",
                    url: "StationeryReqTrendAnalysis.aspx/getChartData",
                    contentType: "application/json",
                    data: JSON.stringify({ "jdeptName": $deptName, "jmonth1": $month1, "jyear1": $year1, "jmonth2": $month2, "jyear2": $year2, "jmonth3": $month3, "jyear3": $year1, "joptionsCategory": $optionsCategory, "jselectedCategory": $selectedItems }),
                    dataType: "json",
                    success: function (data) {
                        var month1 = data.d[0].series1Name;
                        var month2 = data.d[0].series2Name;
                        var month3 = data.d[0].series3Name;

                        $("#chartContainer").dxChart({
                            dataSource: data.d,
                            commonSeriesSettings: {
                                argumentField: "xMember",
                                type: "bar",
                                hoverMode: "allArgumentPoints",
                                selectionMode: "allArgumentPoints",
                                label: {
                                    visible: true,
                                    format: "fixedPoint",
                                    precision: 0
                                }
                            },
                            series: [
                                    { valueField: "series1", name: month1 },
                                    { valueField: "series2", name: month2 },
                                    { valueField: "series3", name: month3 }
                            ],

                            title: "Stationery Requisition Trend Analysis",
                            legend: {
                                verticalAlignment: "bottom",
                                horizontalAlignment: "center"
                            },
                            pointClick: function (point) {
                                this.select();
                            }
                        });
                        if (month2 == null) {
                            $("#chartContainer").dxChart({
                                series: [
                                    { valueField: "series1", name: month1 }
                            ]
                            });
                        }
                    }
                });
            });
        });
    </script>
</asp:Content>
